<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>图片裁剪</title>
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="stylesheet" href="cropper/layui.css">
  <link rel="stylesheet" href="cropper/public.css">
  <link rel="stylesheet" href="cropper/font-awesome.min.css">
  <link rel="stylesheet" href="cropper/tether.min.css">
  <link rel="stylesheet" href="cropper/bootstrap.min.css">
  <link rel="stylesheet" href="cropper/cropper.css">
  <link rel="stylesheet" href="cropper/main.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
<!--  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
  <![endif]-->
  <style>
    @media (min-width: 576px) {
      .container {
        width: 760px;
        height: 285px;
      }
    }

    body {
      background-color: rgb(247, 247, 247);
    }

    .person {
      font-size: 12px;
      font-family: "NSimSun";
      color: rgb(31, 148, 145);
      line-height: 1.827;
      text-align: justifyLeft;
    }

    input {
      background-color: rgb(255, 255, 255);
      width: 240px;
      height: 20px;
      outline: none;
      border: none;
      font-size: 12px;
      margin-left: 10px;
    }

    .warn {
      font-size: 12px;
      font-family: "NSimSun";
      color: rgb(204, 204, 204);
      line-height: 1.827;
      text-align: justifyLeft;
    }

    .cropper-view-box {
      border-radius: 50%;
    }
    .childrenBody{ padding:10px;}
  </style>
</head>
<body class="childrenBody">
<div class="layui-inline layui-col-md12">
<div class="layui-input-inline layui-col-md8">
  <div class="layui-row">
    <div class="img-container">
      <img id="image" src="cropper/cropperPic.jpg" alt="Picture">
    </div>
  </div>
  <div class="layui-row">
    <div class="layui-col-md12 docs-buttons">
      <!--重置上传图片-->
      <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-primary btn-sm" data-method="reset" title="重置" onclick="reset();">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="重置">
                        <i class="layui-icon">重置</i>
                    </span>
        </button>
        <label class="btn btn-primary btn-upload btn-sm" for="inputImage" title="Upload image file">
          <form id="registerForm" enctype="multipart/form-data"  method="post" action=""> <!-- class="sr-only" id="inputImage" -->
            <input type="file" name="file" class="sr-only" id="inputImage" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" onchange="verificationPicFile(this)">
            <input type="hidden" id="tailor" name="tailor" vlaue="" >
            <input type="hidden" id="cezhan_id" name="id" vlaue="" >
            <input type="hidden" id="num" name="num" vlaue="" >
            <input type="hidden" id="commit_title" name="title" vlaue="" >
            <input type="hidden" id="projectName">
          </form>

          <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="上传图片">
		                <i class="layui-icon">上传</i>
		            </span>
        </label>
      </div>

      <!--确认选择和返回-->
      <button type="button" class="btn btn-success btn-sm confirm" style="cursor: pointer" title="确认上传">确认上传</button>
      <button type="button" id="fanhui" class="btn btn-success btn-sm back" title="返回" style="cursor: pointer">返回
      </button>

      <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-bottom: 20px"></div>
    </div>
  </div>
</div>
<div class="layui-input-inline layui-col-md4" style="padding-left: 30px;">
  <div>
    <div class="docs-preview clearfix" style="max-width: 98%;">
      <div class="img-preview preview-lg" style="max-width: 100%;"></div>
    </div>
  </div>
  <!-- <h3>Toggles:</h3> -->
</div>
</div>
<!-- Scripts -->
<!--<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>-->
<script src="cropper/jquery-1.9.1.js"></script>
<script src="cropper/tether.min.js"></script>
<script src="cropper/bootstrap.min.js"></script>

<script src="../../../statics/js/common.js"></script>
<!--<script type="text/javascript" src="../layui/layui.js"></script>-->
<script src="../../../statics/plugins/layui/layui.js"></script>
<script src="cropper/cropperHead.js"></script>
<script src="cropper/mainHead.js"></script>
<!--<script>-->
<!--$('.img-container > img').cropper({-->
<!--aspectRatio: 1 / 1,-->
<!--strict:false,-->
<!--resizable:false-->
<!--});-->
<!--</script>-->

<script type="text/javascript">
  $('#image').cropper({
    aspectRatio: 4 / 3,
    strict:false,
    preview: '.img-preview',
    resizable:true
  });
</script>
<script type="text/javascript">
  layui.use(['layer' ], function () {
    layer = parent.layer === undefined ? layui.layer : top.layer;
    $ = layui.jquery;

    var pathName = window.document.location.pathname;
    var rootName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    var cropIndex = parent.layui.layer.getFrameIndex(window.name);

    $("#fanhui").click(function() {
      parent.layui.layer.close(cropIndex);
    })

    window.reset = function(){
        location.reload();
    }
    //    $.ajax({
    //        url:"http://192.168.5.188:8080/admin/user/updateUserAva.do?avatarUrl=back/picture/cut/user/36cbb992ab0d4aa991098d3ce955dbcd.jpg&token=2A42FEF04FA5085A09289A888CB6EB02E3A3D5441E48DCE0C707A95EB9366B6D3C2CF9A63087D5A832999E3A72D56E83&userid=75412f3f53634a2e93745fe5225a39bb",
    //        success: function (data) {
    //            console.log(data);
    //        }
    //    })
    $(".confirm").click(function () {
      if (!$('#inputImage').val()) {
        layer.msg("请先上传图片", {time: 2000});
        return false;
      }
//        $('#cezhan_id').val($('#cezhan1Id',window.parent.document).val());   //开始进来的时候拿到一个策展的id
      var tailor = JSON.stringify($("#image").cropper("getData"));
      if (isEmpty(tailor)) {
        layer.msg("请先上传图片", {time: 2000});
        return false;
      }
      $("#tailor").val(tailor);
      var formData = new FormData($("#registerForm")[0]);
      var projectName = $("#projectName").val();

      $.ajax({
        url: property.getProjectPath() + '/attach/cutPicture.do?projectName='+ projectName,
        type: "post",
        data: formData,
        dataType: "json",
        async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function (result) {
          if (result.code == 1) {
            var map = result.data;
//            var url = map.absolutePath;                 //拿到图片的路径
//            var id = map.id;
//            var picName = map.realFileName;
            localStorage["map"]=JSON.stringify(map);
//            parent.$('#parentIframe').val(map);
            parent.layui.layer.close(cropIndex);
            //              把标题和图片清空
          } else {
//            console.log(result.error.message);
            layer.alert(result.error.message, {icon: 0});
            /*layer.alert(result.data,{
             icon: 0,
             skin: 'layer-ext-moon'
             });*/
          }
        },
        error: function (errData) {
//          console.log(errData);
        }
      });
    })
    function isEmpty(obj){
      if(typeof obj == "undefined" || obj == null || obj == "")	{
        return true;
      }else{
        return false;
      }
    }
  })

  function verificationPicFile(file) {
      var fileTypes = [".jpg",".jpeg",".png",".gif",".bmp",".tiff"];
      var filePath = file.value;
      //当括号里面的值为0、空字符、false 、null 、undefined的时候就相当于false
      if(filePath){
          var isNext = false;
          var fileEnd = filePath.substring(filePath.lastIndexOf("."));
          for (var i = 0; i < fileTypes.length; i++) {
              if (fileTypes[i] == fileEnd) {
                  isNext = true;
                  break;
              }
          }
          if (!isNext){
              alert('不接受此文件类型');
              file.value = "";
              return false;
          }
      }else {
          return false;
      }
  }

</script>
</body>
</html>
